<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信年度聊天报告 - 流金岁月</title>
    <!-- 外部资源 -->
    <link rel="stylesheet" href="https://memotrace.cn/static/css/fullpage.min.css" />
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/echarts-wordcloud.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script type="text/javascript" src="https://memotrace.cn/static/js/fullpage.min.js"></script>
    <!-- 引入艺术字体 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Sans+SC:wght@300;400;700&display=swap" rel="stylesheet">
    
    <style>
        /* --- 全局艺术化设计系统 --- */
        :root {
            --bg-color: #A92323; /* 主基调：中国红 */
            --text-color: #F5EFE6; /* 文字颜色：宣纸白 */
            --accent-color-gold: #E8C872; /* 强调色：流沙金 */
            --card-bg-color: rgba(0, 0, 0, 0.15); /* 卡片背景：半透明墨色 */
            --font-title: 'Ma Shan Zheng', cursive; /* 标题字体：书法体 */
            --font-body: 'Noto Sans SC', sans-serif; /* 正文字体 */
            --animation-curve: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        body {
            font-family: var(--font-body);
            color: var(--text-color);
            background-color: var(--bg-color);
        }

        .section {
            background-color: var(--bg-color);
            background-image: url('https://www.transparenttextures.com/patterns/fabric-of-squares.png'); /* 添加织物纹理 */
            text-align: center;
            padding: 40px 20px;
            position: relative;
            overflow: hidden; /* 隐藏溢出的动态元素 */
        }

        /* --- 页面装饰元素 --- */
        .section::before, .section::after {
            content: '';
            position: absolute;
            width: 80px;
            height: 80px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M25 0 V25 H0 M100 25 H75 V0 M0 75 H25 V100 M75 100 V75 H100' fill='none' stroke='%23E8C872' stroke-width='2'/%3E%3C/svg%3E");
            background-size: contain;
            opacity: 0.5;
            z-index: 0;
        }
        .section::before { top: 20px; left: 20px; }
        .section::after { bottom: 20px; right: 20px; transform: rotate(180deg); }

        /* --- 统一内容样式 --- */
        .page-title {
            font-family: var(--font-title);
            font-size: 4rem;
            font-weight: normal;
            color: var(--accent-color-gold);
            text-shadow: 2px 2px 5px rgba(0,0,0,0.3);
            margin-bottom: 5px;
        }
        .page-subtitle {
            font-size: 1.1rem;
            color: var(--text-color);
            opacity: 0.8;
            margin-bottom: 30px;
            letter-spacing: 1px;
        }
        .highlight {
            color: var(--accent-color-gold);
            font-weight: 700;
        }

        /* --- 艺术化卡片设计 --- */
        .stat-card {
            background: var(--card-bg-color);
            border-radius: 12px;
            padding: 25px;
            margin: 15px auto;
            max-width: 480px;
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(5px);
            border: 1px solid rgba(232, 200, 114, 0.4);
            animation: fadeInUp 1s var(--animation-curve) both;
            position: relative;
            z-index: 1;
        }
        .icon-wrapper {
            width: 60px; height: 60px;
            background-color: var(--accent-color-gold);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: -55px auto 15px auto;
            border: 4px solid var(--bg-color);
            font-size: 1.8rem;
            color: var(--bg-color);
        }
        .stat-card h3 {
            font-size: 1.2rem;
            margin: 0 0 10px 0;
            color: #fff;
        }
        .stat-card p {
            font-size: 1rem;
            line-height: 1.7;
            margin: 5px 0;
            opacity: 0.9;
        }

        /* --- 滚动指示器 --- */
        .scroll-indicator {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 100;
            color: var(--accent-color-gold);
            opacity: 0.7;
            animation: pulse 2.5s infinite;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 0.8rem;
        }
        .scroll-indicator .arrow {
            width: 0; height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-top: 10px solid var(--accent-color-gold);
            margin-top: 5px;
        }
        @keyframes pulse { 0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.05); } }

        /* --- 各页面细节微调 --- */
        #welcome-section .welcome-title { font-size: 7rem; line-height: 1; }
        #welcome-section .avatar { border: 4px solid var(--accent-color-gold); }
        .countdown-box { display: flex; justify-content: center; gap: 10px; margin-top: 15px; }
        
        /* === 修改开始: 优化词云图样式 === */
        #word_cloud { 
            height: 38vh !important;
            /* 为词云图增加独立背景板，提升清晰度 */
            max-width: 500px;
            margin: 20px auto 0; /* 调整外边距，与下方卡片留出空间 */
            padding: 15px;
            background: rgba(0, 0, 0, 0.22); /* 使用比卡片稍深的半透明背景 */
            border-radius: 12px;
            border: 1px solid rgba(232, 200, 114, 0.3);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
            position: relative;
            z-index: 1;
        }
        /* === 修改结束 === */

        .keyword-highlight .keyword { font-size: 3rem; color: var(--accent-color-gold); font-family: var(--font-title); }
        #calendar-section .calendar-chart { height: 35vh !important; }
        #calendar-section .emoji { width: 80px; height: 80px; margin: 10px 0; }
        
        /* --- 结尾页特殊设计 --- */
        #ending-section { background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%); }
        #ending-section *, #ending-section .page-title { color: var(--text-color); }
        #ending-section .page-title { color: var(--accent-color-gold); }
        #ending-section .ending-text { font-size: 1.1rem; }
        #ending-section::before, #ending-section::after { display: none; } /* 结尾页移除角标 */
        
        /* ===== 新增：动态装饰效果 ===== */

        /* 1. 流光微尘 (用于普通页面) */
        .time-dust {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none; /* 让鼠标事件穿透 */
            z-index: 0;
        }
        .time-dust span {
            position: absolute;
            bottom: -20px; /* 从底部开始 */
            background-color: var(--accent-color-gold);
            border-radius: 50%;
            opacity: 0;
            animation: floatUp 15s linear infinite;
        }
        @keyframes floatUp {
            0% { transform: translateY(0); opacity: 0; }
            10%, 90% { opacity: 0.6; }
            100% { transform: translateY(-100vh); opacity: 0; }
        }
        /* 为每个微尘设置不同的属性，形成随机感 */
        .time-dust span:nth-child(1) { left: 5%; width: 2px; height: 2px; animation-duration: 25s; animation-delay: 1s; }
        .time-dust span:nth-child(2) { left: 15%; width: 3px; height: 3px; animation-duration: 20s; animation-delay: 3s; }
        .time-dust span:nth-child(3) { left: 30%; width: 1px; height: 1px; animation-duration: 30s; animation-delay: 5s; }
        .time-dust span:nth-child(4) { left: 45%; width: 2px; height: 2px; animation-duration: 18s; animation-delay: 0s; }
        .time-dust span:nth-child(5) { left: 60%; width: 1px; height: 1px; animation-duration: 22s; animation-delay: 7s; }
        .time-dust span:nth-child(6) { left: 75%; width: 3px; height: 3px; animation-duration: 28s; animation-delay: 2s; }
        .time-dust span:nth-child(7) { left: 90%; width: 2px; height: 2px; animation-duration: 19s; animation-delay: 4s; }


        /* 2. 璀璨流星 (用于结尾页) */
        #shooting-stars {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .star {
            position: absolute;
            background: linear-gradient(-45deg, var(--accent-color-gold), rgba(245, 239, 230, 0));
            border-radius: 999px;
            filter: drop-shadow(0 0 6px var(--accent-color-gold));
            animation: shoot 5s linear infinite;
        }
        @keyframes shoot {
            0% { transform: translateX(0); opacity: 1; }
            80% { opacity: 1; }
            100% { transform: translateX(300px); opacity: 0; }
        }
        /* 为每颗流星设置不同属性 */
        .star:nth-child(1) { top: 20%; left: -100px; width: 80px; height: 1px; animation-duration: 4s; animation-delay: 1.5s; }
        .star:nth-child(2) { top: 40%; left: -150px; width: 120px; height: 2px; animation-duration: 3s; animation-delay: 3s; transform: rotate(-15deg); }
        .star:nth-child(3) { top: 70%; left: -50px; width: 90px; height: 1px; animation-duration: 5s; animation-delay: 5.2s; }
        
        /* --- 动画 --- */
        .fp-viewing-1 .page-title, .fp-viewing-1 .page-subtitle { animation: fadeInDown 1s var(--animation-curve) both; }
        .fp-viewing-1 .stat-card { animation: fadeInUp 1s var(--animation-curve) 0.4s both; }

    </style>
</head>
<body>
    <div id="fullpage">
        <!-- ===== Page 1: 欢迎页 [卷首] ===== -->
        <div class="section" id="welcome-section">
            <div class="time-dust"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
            <h1 class="page-title welcome-title">二〇二五</h1>
            <h2 class="page-subtitle" style="font-family: var(--font-title); font-size: 2rem; opacity: 1;">流金岁月</h2>
            <div style="margin: 50px 0; animation: fadeInUp 1s 0.6s var(--animation-curve) both;">
                <img class="avatar" src="{{my_avatar_path}}" style="width:110px; height:110px; border-radius:50%; margin:0 15px;">
                <span style="font-size: 3rem; color: var(--accent-color-gold); vertical-align: middle;">&</span>
                <img class="avatar" src="{{ta_avatar_path}}" style="width:110px; height:110px; border-radius:50%; margin:0 15px;">
            </div>
            <div class="scroll-indicator"><span>下滑启阅</span><div class="arrow"></div></div>
        </div>
        
        <!-- ===== Page 2: 记忆的起点 [初见] ===== -->
        <div class="section">
            <div class="time-dust"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
            <h2 class="page-title">初见</h2>
            <p class="page-subtitle">一切故事，皆始于此</p>
            <div class="stat-card">
                 <div class="icon-wrapper">💌</div>
                 <h3>我们的第一次聊天</h3>
                 <p id="first_time" class="highlight" style="font-size:1.4rem;">{{first_time}}</p>
                 <hr style="border:0; border-top:1px solid rgba(232, 200, 114, 0.3); margin: 20px 0;">
                 <p>自那天起，我们已相伴</p>
                 <div class="countdown-box">
                    <div class="time-unit"><span id="t_d"></span><br><small>天</small></div>
                    <div class="time-unit"><span id="t_h"></span><br><small>时</small></div>
                    <div class="time-unit"><span id="t_m"></span><br><small>分</small></div>
                    <div class="time-unit"><span id="t_s"></span><br><small>秒</small></div>
                 </div>
            </div>
            <div class="scroll-indicator"><span>下滑启阅</span><div class="arrow"></div></div>
        </div>

        <!-- ===== Page 3: 年度热词 [心语] ===== -->
        <div class="section">
            <div class="time-dust"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
            <h2 class="page-title">心语</h2>
            <p class="page-subtitle">有些话，总是不自觉地挂在嘴边</p>
            <div id="word_cloud"></div>
            <!-- === 修改开始: 移除内联样式，交由CSS统一管理 === -->
            <div class="stat-card keyword-highlight">
            <!-- === 修改结束 === -->
                <p>我们说得最多的词是</p>
                <div class="keyword">“{{keyword}}”</div>
                <p>足足说了 <span class="highlight">{{keyword_max_num}}</span> 次</p>
            </div>
            <div class="scroll-indicator"><span>下滑启阅</span><div class="arrow"></div></div>
        </div>

        <!-- ===== Page 4: 深夜私语 [夜阑] ===== -->
        <div class="section">
            <div class="time-dust"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
             <h2 class="page-title">夜阑</h2>
             <p class="page-subtitle">最深的夜，有最真的话</p>
             <div class="stat-card" style="animation-delay: 0.2s;">
                 <div class="icon-wrapper">🌙</div>
                 <h3>最晚的守候</h3>
                 <p>在 <span class="highlight">{{latest_time}}</span>，我们仍在分享彼此</p>
             </div>
             <div class="stat-card" style="animation-delay: 0.4s;">
                 <div class="icon-wrapper">🕰️</div>
                 <h3>我们的默契时区</h3>
                 <p>我们都是<span class="highlight">{{chat_time_label}}</span></p>
                 <p>在此期间交换了 <span class="highlight">{{chat_time_num}}</span> 条心事</p>
             </div>
             <div class="scroll-indicator"><span>下滑启阅</span><div class="arrow"></div></div>
        </div>

        <!-- ===== Page 5: 数据总览 [墨痕] ===== -->
        <div class="section">
            <div class="time-dust"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
            <h2 class="page-title">墨痕</h2>
            <p class="page-subtitle">字里行间，是情感的印记</p>
            <div class="stat-card" style="animation-delay: 0.2s;">
                <div class="icon-wrapper">📜</div>
                <h3>消息总量</h3>
                <p>一年里，我们共书写了 <span class="highlight">{{total_msg_num}}</span> 条消息</p>
                <p>合计 <span class="highlight">{{total_num}}</span> 字，情意绵长</p>
            </div>
            <div class="stat-card" style="animation-delay: 0.4s;">
                <div class="icon-wrapper">🌊</div>
                <h3>情感潮汐</h3>
                <p>在 <span class="highlight">{{max_month}}</span> 思念最浓，有 <span class="highlight">{{max_month_num}}</span> 条消息</p>
                <p>在 <span class="highlight">{{min_month}}</span> 享受静谧，有 <span class="highlight">{{min_month_num}}</span> 条消息</p>
            </div>
            <div class="scroll-indicator"><span>下滑启阅</span><div class="arrow"></div></div>
        </div>

        <!-- ===== Page 6: 日历与表情 [点滴] ===== -->
        <div class="section">
            <div class="time-dust"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
            <h2 class="page-title">点滴</h2>
            <p class="page-subtitle">我们共同点亮了 <span class="highlight">{{chat_days}}</span> 个日子，温暖而闪亮</p>
            <div id="calendar-chart" class="calendar-chart"></div>
            <div class="stat-card emoji-card" style="margin-top:20px;">
                <div class="icon-wrapper" style="margin-top:0;">😂</div>
                <h3>Ta的专属表情</h3>
                <img src="{{emoji_url}}" class="emoji">
                <p>这个表情，Ta用了 <span class="highlight">{{emoji_num}}</span> 次</p>
            </div>
            <div class="scroll-indicator"><span>下滑启阅</span><div class="arrow"></div></div>
        </div>

        <!-- ===== Page 7: 结尾页 [未央] ===== -->
        <div class="section" id="ending-section">
            <div id="shooting-stars">
                 <span class="star"></span><span class="star"></span><span class="star"></span>
            </div>
            <div style="position:relative; z-index: 1;">
                <h2 class="page-title" style="font-size: 4rem;">未央</h2>
                <p class="ending-text" style="font-size: 1.1rem; line-height: 2; opacity: 0.9;">
                    故事承于过往，亦将启于新章。<br>
                    愿来年，依旧有你，温暖如初。
                </p>
            </div>
             <!-- 最后一页没有滚动指示器 -->
        </div>
    </div>
    
<script>
    $(document).ready(function() {
      $('#fullpage').fullpage({
          scrollingSpeed: 1000,
          navigation: false, // 隐藏默认导航点
          onLeave: function(origin, destination, direction){
                $(destination.item).find('[style*="animation"]').each(function() {
                    $(this).css('animation', 'none');
                    // 强制浏览器重新渲染
                    void this.offsetWidth; 
                    var animationName = $(this).css('animation-name');
                    var animationDuration = $(this).css('animation-duration');
                    var animationDelay = $(this).css('animation-delay');
                    var animationTiming = $(this).css('animation-timing-function');
                    $(this).css({
                        'animation-name': animationName,
                        'animation-duration': animationDuration,
                        'animation-delay': animationDelay,
                        'animation-timing-function': animationTiming,
                        'animation-fill-mode': 'both'
                    });
                });
            },
            afterLoad: function(origin, destination, direction){
                if(destination.isLast){
                    $('.scroll-indicator').fadeOut();
                } else {
                    $('.scroll-indicator').fadeIn();
                }
            }
      });
    });
</script>
<script>
    // 词云图艺术化配置
    var chart_wordcloud = echarts.init(document.getElementById('word_cloud'), null, {renderer: 'canvas'});
    var option_wordcloud = {{wordcloud_chart_data|safe}};
    
    // === 修改开始: 优化词云图文字颜色，提升对比度和清晰度 ===
    option_wordcloud.series[0].textStyle.color = function() {
        // 使用亮白、宣纸白和不同层次的金色，确保清晰可辨
        var colors = ['#FFFFFF', '#F5EFE6', '#E8C872', '#DDBA7E'];
        return colors[Math.floor(Math.random() * colors.length)];
    };
    // === 修改结束 ===

    option_wordcloud.series[0].sizeRange = [18, 70];
    chart_wordcloud.setOption(option_wordcloud);

    // 日历图艺术化配置
    var chart_calendar = echarts.init(document.getElementById('calendar-chart'), null, {renderer: 'canvas'});
    var option_calendar = {{calendar_chart_data|safe}};
    option_calendar.visualMap.inRange.color = ['#F5EFE6', '#E8C872', '#D4AF37']; // 宣纸白 -> 流沙金 -> 纯金
    option_calendar.calendar.dayLabel.color = 'rgba(245, 239, 230, 0.8)';
    option_calendar.calendar.monthLabel.color = 'rgba(245, 239, 230, 0.8)';
    option_calendar.calendar.yearLabel.show = false; // 隐藏年份标签，因为页面标题已经有了
    option_calendar.calendar.splitLine.lineStyle.color = 'rgba(232, 200, 114, 0.2)';
    option_calendar.calendar.itemStyle.borderColor = 'var(--bg-color)';
    chart_calendar.setOption(option_calendar);
</script>
<script type="text/javascript"> 
    function getRTime() {
        var firstTimeElem = document.getElementById("first_time");
        if (!firstTimeElem || !firstTimeElem.innerText) return;
        var EndTime = new Date(firstTimeElem.innerText.replace(/-/g, "/"));
        var NowTime = new Date();
        var t = NowTime.getTime() - EndTime.getTime();
        if (t < 0) return;
        document.getElementById("t_d").innerText = Math.floor(t / 1000 / 60 / 60 / 24);
        document.getElementById("t_h").innerText = Math.floor(t / 1000 / 60 / 60 % 24);
        document.getElementById("t_m").innerText = Math.floor(t / 1000 / 60 % 60);
        document.getElementById("t_s").innerText = Math.floor(t / 1000 % 60);
    }
    setInterval(getRTime, 1000);
</script>
</body>
</html>

